<template>
	<view class="wrap">
		<view class="item">
			<view class="item-label need">货源状态</view>
			<view class="item-content">
				<u-radio-group v-model="supplyStatus" @change="radioGroupChange">
					<u-radio v-for="(item, index) in statusList" :key="index" :name="item.type">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="item">
			<view class="item-label need">剪样价格</view>
			<view class="item-content app_flex1">
				<input class="app_flex1" type="text" placeholder="￥0.00" placeholder-class="app_phc"
					v-model="cutSamplePrice">
				<view class="unit app_arrow" @click="showUnitSelect = true,unitType='cut'">{{unit}}</view>
			</view>
		</view>
		<view class="item">
			<view class="item-label need">大货价格</view>
			<view class="item-content app_flex1">
				<input class="app_flex1" type="text" placeholder="￥0.00" placeholder-class="app_phc"
					v-model="bulkGoodsPrice">
				<view class="unit app_arrow" @click="showUnitSelect = true,unitType='bulk'">{{unit}}</view>
			</view>
		</view>
		<!-- <view class="item" v-if="unit == '元/公斤'">
			<view class="item-label need">空差设置</view>
			<view class="item-content app_flex1">
				<input class="app_flex1" type="text" placeholder="请输入纸筒" placeholder-class="app_phc">
				<view style="margin-right: 44rpx;">纸筒</view>
				<input class="app_flex1" type="text" placeholder="请输入空差" placeholder-class="app_phc" v-model="grap">
				<view>空差</view>
			</view>
		</view> -->
		<view class="item">
			<view class="item-label need">空差设置</view>
			<view class="item-content app_flex1">
				<input class="app_flex1" type="text" placeholder="请输入空差" placeholder-class="app_phc" v-model="grap">
				<!-- <view class="unit app_arrow" @click="showPriceUnitSelect = true">{{priceUnit}}</view> -->
			</view>
		</view>
		<view class="freedomBox">
			<view class="item-label need">上传图片</view>
			<view class="item-content">
				<view class="upload">
					<!-- <image v-for="(item,index) in 5" src="../../static/images/icon-upload-add.png" mode="aspectFill">
					</image> -->
					<u-upload del-bg-color="#888" max-count="10" :action="action" @on-uploaded="onUploaded"
						@on-remove="onRemove" name="file" width="152" height="152">
					</u-upload>
				</view>
			</view>
		</view>
		<view class="freedomBox">
			<view class="item-label">其他描述</view>
			<view class="item-content app_flex1">
				<textarea class="item-desc app_flex1" v-model="description" placeholder="描述详细说明"
					placeholder-class="app_phc" maxlength="-1" />
			</view>
		</view>
		<view class="btn">
			<g-btn title="确定报价" @click="onConfirmTap"></g-btn>
		</view>

		<u-select v-model="showUnitSelect" :list="unitList" value-name="id" label-name="name"
			@confirm="onUnitSelectConfirm"></u-select>
		<!-- <u-select v-model="showPriceUnitSelect" :list="priceUnitList" value-name="type" label-name="name"
			@confirm="onPriceUnitSelectConfirm"></u-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				purchaseId: '', // 采购ID
				unit: '',
				unitId: '',
				// unitType: '', // cut bulk
				// cutSampleUnit: '', // 剪样价格单位
				// cutSampleUnitId: '',
				// bulkGoodsUnit: '', // 大货价格单位
				// bulkGoodsUnitId: '',
				supplyStatus: 0,
				statusList: [{
					name: '现货',
					type: 0
				}, {
					name: '定做',
					type: 1
				}],
				showUnitSelect: false,
				unitList: [],
				cutSamplePrice: '',
				bulkGoodsPrice: '',
				grap: '',
				action: '',
				uploadImgList: [],
				description: '',
				showPriceUnitSelect: false,
				// priceUnit: '+',
				// priceUnitId: '1',
				// priceUnitList: [{
				// 	name: '+',
				// 	type: 1
				// }, {
				// 	name: '-',
				// 	type: 2
				// }, {
				// 	name: '*',
				// 	type: 3
				// }, {
				// 	name: '/',
				// 	type: 4
				// }]
			}
		},
		onLoad(options) {
			this.purchaseId = options.purchaseId
			this.getPriceUnit()
			this.action = `${this.$g_config.requestUrl}/api/common/common/upload`
		},
		methods: {
			onUploaded(lists, name) {
				console.log(lists);
				let arr = []
				lists.forEach(item => {
					if (item.response?.fileName) {
						arr.push(item.response.fileName)
					}
				})
				this.uploadImgList = arr
			},
			onRemove(index, lists, name) {
				let arr = []
				lists.forEach(item => {
					if (item.response?.fileName) {
						arr.push(item.response.fileName)
					}
				})
				this.uploadImgList = arr
			},
			getPriceUnit() {
				this.$g_api.commonPriceUnit().then(({
					data
				}) => {
					if (data?.length > 0) {
						// this.cutSampleUnit = data[0].name
						// this.cutSampleUnitId = data[0].id
						// this.bulkGoodsUnit = data[0].name
						// this.bulkGoodsUnitId = data[0].id
						this.unit = data[0].name
						this.unitId = data[0].id
						this.unitList = data
					}
				})
			},
			onUnitSelectConfirm(e) {
				console.log(e);
				// console.log(this.unitType);
				// if (this.unitType == 'cut') {
				// 	this.cutSampleUnit = e[0].label
				// 	this.cutSampleUnitId = e[0].value
				// } else if (this.unitType == 'bulk') {
				// 	this.bulkGoodsUnit = e[0].label
				// 	this.bulkGoodsUnitId = e[0].value
				// }
				this.unit = e[0].label
				this.unitId = e[0].value
			},
			// onPriceUnitSelectConfirm(e) {
			// 	this.priceUnit = e[0].label
			// 	this.priceUnitId = e[0].value
			// },
			radioGroupChange(e) {
				console.log(e);
			},
			checkParams() {
				let {
					bulkGoodsPrice,
					cutSamplePrice,
					description,
					grap,
					uploadImgList,
					supplyStatus,
					purchaseId,
					unitId: unit,
					// priceUnitId
				} = this
				let msg = ''
				if (!cutSamplePrice) {
					msg = '请输入剪样价格'
				} else if (!bulkGoodsPrice) {
					msg = '请输入大货价格'
				} else if (!grap) {
					msg = '请输入空差'
				} else if (!uploadImgList || uploadImgList.length == 0) {
					msg = '请上传图片'
				}

				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none',
					})
					return false
				}

				return {
					bulkGoodsPrice,
					cutSamplePrice,
					description,
					grap,
					images: uploadImgList.join(','),
					purchaseId,
					quotedType: 0,
					supplyStatus,
					priceUint: unit, // 这个是价格单位
					unit: -1, // 这个是+-*/
					// priceUint: priceUnitId
				}
			},
			/**
			 * 确认报价
			 */
			onConfirmTap() {
				let params = this.checkParams()
				if (!params) return
				console.log(params);
				// return
				this.$g_api.purchaseQuoted(params).then(({
					data
				}) => {
					uni.showToast({
						title: '报价成功'
					})
					uni.$emit('update-purchaseNote')
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})
			}
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.u-radio {
		margin-right: 60rpx;
	}
</style>
<style scoped lang="scss">
	.wrap {
		padding: 0 30rpx 60rpx;
	}

	.item {
		display: flex;
		align-items: center;
		height: 98rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.item-label {
		flex-shrink: 0;
		position: relative;
		width: 170rpx;
		line-height: 98rpx;
		padding-left: 20rpx;
		box-sizing: border-box;

		&.need {
			&::before {
				content: '*';
				position: absolute;
				left: 0;
				top: 4%;
				color: #ff3333;
			}
		}
	}

	.item-content {
		display: flex;
		align-items: center;
	}

	.unit {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
		min-width: 120rpx;
		height: 60rpx;
		padding: 0 46rpx 0 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		background-color: #f2f2f2;

		&::after {
			right: 20rpx;
			transform: translateY(-50%) rotate(135deg);
			transition: all 0.3s;
		}

		&.active {
			&::after {
				transform: rotate(-45deg);
			}
		}
	}

	.freedomBox {
		display: flex;
	}

	.upload {
		padding-top: 40rpx;
		font-size: 0;

		image {
			width: 160rpx;
			height: 160rpx;
			margin: 0 20rpx 20rpx 0;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.item-desc {
		width: 520rpx;
		padding-top: 32rpx;
	}

	.btn {
		margin: 50rpx 0 0;
	}
</style>
